import React, { useEffect, useState, useRef } from 'react'
import ReactDom from 'react-dom'



export default function UseRefCom () {
    const [count, setCount] = useState(0)
    // let timeId = null;   //zs // zss


    const timeRef = useRef(null)  //将timeRef保存在一个多次渲染也不会丢失的位置。
    console.log('1', timeRef.current)


    useEffect(() => {
        timeRef.current = setInterval(() => {
            setCount((count) => count + 1)
        }, 1000)
        console.log('2', timeRef.current)
    }, [])

    const hClick = () => {
        // console.log(timeId)
        clearInterval(timeRef.current)
    }

    return (
        <div>
            count:{count}
            <button onClick={hClick}>点击停止定时器</button>
        </div>
    )
}
